<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<template slot="button" v-if="isExistButton">
			<el-button size="small" type="primary" v-hasPermi="addedButton" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<el-form slot="query" size="small" inline v-if="isExistQuery">
			<el-form-item><el-input v-model="queryData.name" clearable placeholder="角色名称" style="width: 180px" /></el-form-item>
			<el-form-item>
				<sw-dict-select v-model="queryData.type" clearable dict-name="ROLE_TYPE" placeholder="角色类型" style="width: 170px" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQueryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" v-bind="tableConfig" :data="tableData">
			<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
			<el-table-column prop="name" label="角色名称" min-width="200"></el-table-column>
			<el-table-column label="角色类型" min-width="150" :formatter="returnRoleTypeName" />
			<el-table-column prop="createName" label="创建人" min-width="120"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
			<el-table-column label="操作" fixed="right" :width="handleWidth" v-if="isHasAuthButton">
				<template slot-scope="{ row }">
					<el-button type="text" v-hasPermi="handleButtons.configMenu" @click="handleConfigMenu(row)">配置菜单</el-button>
					<el-button type="text" v-hasPermi="handleButtons.selectUser" @click="handleSelectUser(row)">选择人员</el-button>
					<el-button type="text" v-hasPermi="handleButtons.update" @click="handleOpenDialog(row.id)">修改</el-button>
					<el-button type="text" v-hasPermi="handleButtons.delete" @click="handleDeleteData(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<sw-pagination slot="page" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData" />
		<select-user v-model="selectUser" :list="roleUsers" @submit="handleUpdateRoleUser"></select-user>
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
		<config-menu v-model="menuDrawer" :data="roleData"></config-menu>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import configMenu from './configMenu';
import listMixins from '@/mixins/listMixins';
import selectUser from '@/components/selectUser';
import { getRoleList, deleteRole } from '@/api/system/tbSysRole';
import { getUserByRole, addUsersByRole } from '@/api/system/tbSysUserRole';
export default {
	name: 'rolePage',
	mixins: [listMixins],
	components: { formDialog, configMenu, selectUser },
	data() {
		return {
			pageName: '角色',
			roleData: {},
			roleUsers: [],
			menuDrawer: false,
			selectUser: false
		};
	},
	computed: {
		listFunction() {
			return eval(getRoleList);
		},
		deleteFunction() {
			return eval(deleteRole);
		},
		frameTopButton() {
			let frameTopBtns = [];
			if (!!this.addedButton) {
				frameTopBtns = [...frameTopBtns, this.addedButton];
			}
			return frameTopBtns;
		}
	},
	methods: {
		//返回角色类型名称
		returnRoleTypeName(row) {
			let attrs = { size: 'small' };
			let typeArr = this.dictEnums['ROLE_TYPE'];
			let typeData = typeArr.find((n) => n.value === row.type);
			if (row.type === '1') {
				attrs.type = 'danger';
			} else if (row.type === '2') {
				attrs.type = 'warning';
			} else if (row.type === '3') {
				attrs.type = 'success';
			} else if (row.type === '4') {
				attrs.type = 'info';
			}
			return this.$createElement('elTag', { attrs }, typeData.msg);
		},

		//打开抽屉
		handleConfigMenu(row) {
			this.roleData = { ...row };
			this.menuDrawer = true;
		},

		//选择用户
		async handleSelectUser(row) {
			let result = await getUserByRole(row.id).then((res) => res.data);
			this.selectUser = true;
			this.dataId = row.id;
			if (result.code === '0') {
				let datas = result.data || [];
				this.roleUsers = datas.map((n) => {
					return { id: n.userId, userName: n.userName };
				});
			}
		},

		//更新角色用户
		async handleUpdateRoleUser(checked, added, deleted) {
			let addUserOper = added.map((n) => ({ relId: n.id, operType: '1' }));
			let deleteUserOper = deleted.map((n) => ({ relId: n.id, operType: '2' }));
			let params = { roleId: this.dataId, userList: [...addUserOper, ...deleteUserOper] };
			let result = await addUsersByRole(params).then((res) => res.data);
			if (result.code === '0') {
				this.$showCustomMessage('success', `更新角色用户成功`);
				this.selectUser = false;
			}
		}
	}
};
</script>
